{% extends "files/base.html" %}
{% block title %}Индекс{% endblock %}
{% block content_title %}{% endblock %}
{% block extrajs %}<script type="text/javascript" src="{% load media %}{% media_prefix %}js/jquery.js"></script>{% endblock %}
{% block stylesheet %}{% media_prefix %}css/files-progress.css{% endblock %}
{% block main %}
<h2>Загрузка</h2>
<div id="upload_progress" style="display: none"></div>
<form method="post" action="{% url homesite.files.views.uploader category_id %}" enctype="multipart/form-data" target="upload_frame" id="uploader" name="upload_form">
 {% for field in form %}    
   <p class="formlbl">{{ field.label_tag }}{% if field.field.required %}<font color="red">*</font>{% endif %}</p>
   {% if field.errors %}<p class="formerrors">{{ field.errors }}</p>{% endif %}
   <p class="formfld">{{ field }}</p>
 {% endfor %}
 <input type="submit" value="Загрузить" class="submit">
</form>
<iframe id="upload_frame" name="upload_frame" style="display: none"></iframe>
<script type="text/javascript">
var prev_uploaded = 0;

function validate_upload_form(){
  if (document.upload_form.title.value==""){
    alert("Введите Название");
    return false;}
  if (document.upload_form.name.value==""){
    alert("Выберите файл");
    return false;}
  return true;
}

function gen_uuid() {
    var uuid = ""
    for (var i=0; i < 32; i++) {
        uuid += Math.floor(Math.random() * 16).toString(16); 
    }
    return uuid
}

  $('#uploader').submit(function() {
  if (!validate_upload_form()) return false;
  $(this).hide();
  if ($('#uploader').attr("submited")) return false;
  var tid = 0;
  var freq = 1000;
  var uuid = gen_uuid();
  var progress_url = '{% url files.views.uploader_progress %}';
  var action = $('#uploader').attr("action");
  action += '?X-Progress-ID=' + uuid;
  $('#uploader').attr("action", action);
  $('#upload_progress').html('<div class="progress-container"><div class="progress-file-name">Подготовка к загрузке...</div><div class="progress-file-info"><span class="progress-file-uploadsize">байт загружено:</span><span class="progress-file-size">размер: </span></div><div class="progress-bar-border"><div class="progress-bar">&nbsp;</div></div><span class="progress-info">загружено: 0%</span><span class="progress-info-speed">скорость: </span></div>').show(); 

   function update_progress_info() {
       $('#upload_progress').show();
       $.getJSON(progress_url, {'X-Progress-ID': uuid}, function(data, status) {
           if (data) {
             var progress = parseInt(data.uploaded) / parseInt(data.length);
             var width = $('.progress-container').width()
             var progress_width = width * progress;
             $('.progress-bar').css('width', progress_width);
             $('.progress-info').html('загружено: <b>' + parseInt(progress*100) + '</b> %');
             $('.progress-file-uploadsize').html('байт загружено: <b>' + data.uploaded / 1000 + '</b> Кб'); 
             $('.progress-file-size').html('размер: <b>' + data.length / 1000 + '</b> Кб');
             $('.progress-info-speed').html('скорость: <b>' + (data.uploaded - prev_uploaded) / 1000 + '</b> Кб/сек');
             $('.progress-file-name').html('Загружается');
             prev_uploaded = data.uploaded; 
           }
      tid = window.setTimeout(update_progress_info, freq);
      if (data) {
        if (data.complete) {
          window.clearTimeout(tid);
          if (data.error == '') {
            $('#upload_progress').html('<p>Загрузка завершена. <a href="{% url homesite.files.views.category_list category_id %}">Вернутся к списку.</a></p>');
          } else {
            $('#upload_progress').html('<p class="error">'+data.error+'</p>');
            $('#uploader').show();
          }
        }
      }
    });
  };
  tid = window.setTimeout(update_progress_info, freq);

  $('#uploader').attr("submitted", true);

  return true;
});
</script>
{% endblock %}
